<template>
	<view class="box">
		<input type="text" :value="iptVal" @focus="onFocus" @blur="onblur"/>
		<image src="../../static/海绵宝宝.gif" class="pic" :class="isactivate?'activate':''"></image>
	</view>
</template>

<script setup>
	import {ref} from "vue"
const iptVal=ref("")
const isactivate=ref(false)


function onFocus(){
	
	console.log("正在输入")
	isactivate.value=true
}
function onblur(){
	
	console.log("离开输入框，失去焦点")
	isactivate.value=false
}
</script>

<style lang="scss" scoped>
.box{
	padding: 0 20px;
	margin-top: 40px;
	position: relative;
	input{
		border: 1px solid #ccc;
		height: 48px;
		position: relative;
		z-index: 2;
		background: #fff;
	}
	.pic{
		width: 48px;
		height: 48px;
		position:absolute;
		z-index: 1;
		top: 10px;
		left: calc(50% - 24px);
		transition: top 0.3s;
		
	}
	.pic.active{
		top: -48px;
	}
	
}
</style>
